<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width,initial-scale=1"/>
    <script src="./../static/js/jquery/jquery-3.2.1.js" th:src="@{js/jquery/jquery-3.2.1.js}"
            type="text/javascript"></script>
    <title>印章图片缩放</title>
    <style>
        body {
            margin: 30px;
        }
    </style>
</head>
<body>
<div>
    <p>印章类型：</p>
    <select id="sql" onchange="showSql(this.options[this.options.selectedIndex].value)">
        <option value="">请选择</option>
        <option value="SELECT S.ID AS 'id',S.`NAME` AS 'name',S.IMAGE AS 'image' FROM SEAL S WHERE S.WIDTH = S.HEIGHT AND MOLD_STYLE = 'circle' AND S.IMAGE IS NOT NULL">
            圆形章
        </option>
        <option value="SELECT S.ID AS 'id',S.`NAME` AS 'name',S.IMAGE AS 'image' FROM SEAL S WHERE MOLD_STYLE = 'oval' AND S.IMAGE IS NOT NULL">
            椭圆章
        </option>
        <option value="SELECT S.ID AS 'id',S.`NAME` AS 'name',S.IMAGE AS 'image' FROM SEAL S WHERE S.WIDTH = S.HEIGHT AND (MOLD_STYLE IS NULL OR MOLD_STYLE = '') AND S.IMAGE IS NOT NULL">
            自定义
        </option>
    </select>
    SQL: <input id="querySql" style="width:80%">
    <p>裁剪后大小：（注：圆形章：159*159，椭圆章：151*113,计算方法：原图dpi/96dpi*原图的宽或高）</p>
    <p>宽：<input id="width" value="159"></p>
    <p>高：<input id="height" value="159"></p>
    <button onclick="scale()">提交</button>
    <br/>
    <br/>
    <span id="result"></span>
</div>

</body>
<script th:inline="javascript">
    function showSql(val) {
        $("#querySql").val(val);
    }
    /*<![CDATA[*/
    var context = /*[[${#httpServletRequest.getScheme() + "://" + #httpServletRequest.getServerName() + ":" + #httpServletRequest.getServerPort() + #httpServletRequest.getContextPath()}]]*/;
    function scale() {
        $('#result').html("");
        var sql = $("#querySql").val();
        var width = $("#width").val();
        var height = $("#height").val();
        $.ajax({
            type: 'post',
            url: context + '/scale',
            data: {
                sql: sql,
                width: width,
                height: height
            },
            cache: false,
            async: true,
            success: function (data) {
                // var data = eval('(' + data + ')');
                $('#result').html(data.msg);
            }
        });
    }
</script>
</html>